<template>
<el-dialog :title="title" :visible="showDialog" @close="handleCancel">
    <el-form ref="roleForm" :model="roleForm" :rules="roleRules">
        <el-form-item label="角色名称" label-width="100px" prop="name">
            <el-input v-model="roleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="角色描述" label-width="100px" prop="description">
            <el-input v-model="roleForm.description"></el-input>
        </el-form-item>
    </el-form>
    <!-- el-dialog有专门放置底部操作栏的 插槽  具名插槽 -->
    <el-row slot="footer" type="flex" justify="center">
        <!-- 列被分为24 -->
        <el-col style="display: flex; justify-content: center;">
            <el-button type="primary" size="small" @click="handleSubmit">确定</el-button>
            <el-button size="small" @click="handleCancel">取消</el-button>
        </el-col>
    </el-row>
</el-dialog>
</template>

<script>
import { getRoleInfoById, updateRoleById, addRole } from '@/api/setting.js'
export default {
	props: {
		showDialog: {
			type: Boolean,
			default: false
		},
		title: {
			type: String,
			default: '编辑'
		}
	},
	data() {
		return {
			roleForm: {
				description: '',
				name: ''
			},
			roleRules: {
				name: [{ required: true, message: '角色名称不能为空', trigger: 'blur' }],
				description: [{ required: true, message: '角色描述不能为空', trigger: 'blur' }]
			}
		}
	},
	methods: {
		/* 取消 */
		handleCancel() {
			this.$emit('update:showDialog', false)
			this.roleForm = {}
		},
		/* 提交 */
		handleSubmit() {
			this.$refs.roleForm.validate(async isOk => {
				if (isOk) {
					if (this.roleForm.id) {
						await updateRoleById(this.roleForm.id, this.roleForm)
						this.$message.success(`编辑角色 ${this.roleForm.name} 完成！`)
					} else {
						console.log('新增角色')
						await addRole(this.roleForm)
						this.$message.success(`已添加新角色 ${this.roleForm.name} ！`)
					}
					this.$emit('updateRole')
					this.$emit('update:showDialog', false)
				}
			})
		},
		/* 获取角色信息 */
		async getRoleInfo(id) {
			const res = await getRoleInfoById(id)
			this.roleForm = res
			console.log(this.roleForm)
		}
	}
}
</script>

<style>
</style>
